<template>
  <el-row :gutter="15">
    <el-col :span="24">
      <el-card>
        <div slot="header" class="clearfix">
          <span>服务订单导出</span>
        </div>
        <el-form ref="searchForm" class="el-form-col search-form" :model="search">
          <el-row :gutter="15">
            <el-col :lg="4" :md="6">
              <el-form-item prop="orderNo" >
                <el-input v-model="search.orderNo" type="textarea" :rows="4" clearable
                          placeholder="服务订单号  (支持多单查询，用英文逗号分隔)"></el-input>
              </el-form-item>
            </el-col>
            <el-col :lg="4" :md="6">
              <el-form-item  prop="storageTypeCode">
                <el-select v-model="search.storageTypeCode" clearable filterable placeholder="仓储类型">
                  <el-option v-for="item in cargoSourceTypes"
                             :key="item.value"
                             :label="item.text"
                             :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :lg="4" :md="6">
              <el-form-item prop="cargoOwner">
                <el-input v-model="search.cargoOwner" placeholder="货主名称"></el-input>
              </el-form-item>
            </el-col>
            <el-col :lg="4" :md="6" class="hidden-lg-only hidden-xl-only">
              <el-form-item>
                <el-row class="search-btns" :gutter="5">
                  <el-col :span="8">
                    <el-button type="primary" :loading="searchLoading" plain native-type="submit" @click.prevent="searchFunc(search)"><span>搜索</span></el-button>
                  </el-col>
                  <el-col :span="8">
                    <el-button type="info" plain @click="searchOpen = !searchOpen">{{ searchOpen ? '收起' : '展开' }}</el-button>
                  </el-col>
                  <el-col :span="8">
                    <el-button @click="reset('searchForm')" plain>重置</el-button>
                  </el-col>
                </el-row>
              </el-form-item>
            </el-col>
            <el-col :lg="4" :md="6">
              <el-form-item  prop="serviceTypeCode">
                <el-select v-model="search.serviceTypeCode" clearable filterable placeholder="服务类型">
                  <el-option v-for="item in serviceArr"
                             :key="item.value"
                             :label="item.text"
                             :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :lg="4" :md="6">
              <el-form-item prop="consigneName">
                <el-input v-model="search.consigneName" placeholder="用户姓名"></el-input>
              </el-form-item>
            </el-col>
            <el-col :lg="4" :md="6" class="hidden-md-only hidden-sm-only">
              <el-form-item>
                <el-row class="search-btns" :gutter="5">
                  <el-col :span="8">
                    <el-button type="primary" :loading="searchLoading" plain native-type="submit" @click.prevent="searchFunc(search)"><span>搜索</span></el-button>
                  </el-col>
                  <el-col :span="8">
                    <el-button type="info" plain @click="searchOpen = !searchOpen">{{ searchOpen ? '收起' : '展开' }}</el-button>
                  </el-col>
                  <el-col :span="8">
                    <el-button @click="reset('searchForm')" plain>重置</el-button>
                  </el-col>
                </el-row>
              </el-form-item>
            </el-col>
            <el-col :lg="4" :md="6">
              <el-form-item prop="consignePhone">
                <el-input v-model="search.consignePhone" placeholder="用户电话"></el-input>
              </el-form-item>
            </el-col>
            <el-col :lg="4" :md="6">
              <el-form-item  prop="addressArr">
                <CascadeAddress v-model="search.addressArr" :level="3" changeOnSelect/>
              </el-form-item>
            </el-col>
            <el-col :lg="4" :md="6">
              <el-form-item prop="founderUserName">
                <el-input v-model="search.founderUserName" placeholder="下单人"></el-input>
              </el-form-item>
            </el-col>
            <el-col :lg="4" :md="6">
              <el-form-item prop="orderState">
                <el-select v-model="search.orderState" clearable filterable placeholder="订单状态">
                  <el-option v-for="item in orderStateArr"
                             :key="item.value"
                             :label="item.text"
                             :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :lg="4" :md="6">
              <el-form-item prop="arriveState">
                <el-select v-model="search.arriveState" clearable filterable placeholder="到件状态">
                  <el-option label="未到件" value="0"></el-option>
                  <el-option label="部分到件" value="1"></el-option>
                  <el-option label="全部到件" value="2"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <div v-if="searchOpen">
              <el-col :lg="4" :md="6">
                <el-form-item prop="outSourceWarehouse">
                  <el-input v-model="search.outSourceWarehouse" placeholder="订单来源"></el-input>
                </el-form-item>
              </el-col>
              <el-col :lg="4" :md="6">
                <el-form-item prop="foundDateStart">
                  <el-date-picker type="date"
                                  placeholder="下单开始时间"
                                  v-model="search.foundDateStart"
                                  value-format="yyyy-MM-dd"
                  ></el-date-picker>
                </el-form-item>
              </el-col>
              <el-col :lg="4" :md="6">
                <el-form-item prop="foundDateEnd">
                  <el-date-picker type="date"
                                  placeholder="下单结束时间"
                                  v-model="search.foundDateEnd"
                                  value-format="yyyy-MM-dd"
                  ></el-date-picker>
                </el-form-item>
              </el-col>
              <el-col :lg="4" :md="6">
                <el-form-item prop="putInTimeStart">
                  <el-date-picker type="date"
                                  placeholder="全部入库开始时间"
                                  v-model="search.putInTimeStart"
                                  value-format="yyyy-MM-dd"
                  ></el-date-picker>
                </el-form-item>
              </el-col>
              <el-col :lg="4" :md="6">
                <el-form-item prop="putInTimeEnd">
                  <el-date-picker type="date"
                                  placeholder="全部入库结束时间"
                                  v-model="search.putInTimeEnd"
                                  value-format="yyyy-MM-dd"
                  ></el-date-picker>
                </el-form-item>
              </el-col>
              <el-col :lg="4" :md="6">
                <el-form-item prop="outTimeStart">
                  <el-date-picker type="date"
                                  placeholder="出库开始时间"
                                  v-model="search.outTimeStart"
                                  value-format="yyyy-MM-dd"
                  ></el-date-picker>
                </el-form-item>
              </el-col>
              <el-col :lg="4" :md="6">
                <el-form-item prop="outTimeEnd">
                  <el-date-picker type="date"
                                  placeholder="出库结束时间"
                                  v-model="search.outTimeEnd"
                                  value-format="yyyy-MM-dd"
                  ></el-date-picker>
                </el-form-item>
              </el-col>
              <el-col :lg="4" :md="6">
                <el-form-item prop="outBoundTimeStart">
                  <el-date-picker type="date"
                                  placeholder="出发开始时间"
                                  v-model="search.outBoundTimeStart"
                                  value-format="yyyy-MM-dd"
                  ></el-date-picker>
                </el-form-item>
              </el-col>
              <el-col :lg="4" :md="6">
                <el-form-item prop="outBoundTimeEnd">
                  <el-date-picker type="date"
                                  placeholder="出发结束时间"
                                  v-model="search.outBoundTimeEnd"
                                  value-format="yyyy-MM-dd"
                  ></el-date-picker>
                </el-form-item>
              </el-col>
              <el-col :lg="4" :md="6">
                <el-form-item prop="houseCallTimeStart">
                  <el-date-picker type="date"
                                  placeholder="上门开始时间"
                                  v-model="search.houseCallTimeStart"
                                  value-format="yyyy-MM-dd"
                  ></el-date-picker>
                </el-form-item>
              </el-col>
              <el-col :lg="4" :md="6">
                <el-form-item prop="houseCallTimeEnd">
                  <el-date-picker type="date"
                                  placeholder="上门结束时间"
                                  v-model="search.houseCallTimeEnd"
                                  value-format="yyyy-MM-dd"
                  ></el-date-picker>
                </el-form-item>
              </el-col>
              <el-col :lg="4" :md="6">
                <el-form-item prop="signTimeStart">
                  <el-date-picker type="date"
                                  placeholder="签收开始时间"
                                  v-model="search.signTimeStart"
                                  value-format="yyyy-MM-dd"
                  ></el-date-picker>
                </el-form-item>
              </el-col>
              <el-col :lg="4" :md="6">
                <el-form-item prop="signTimeEnd">
                  <el-date-picker type="date"
                                  placeholder="签收结束时间"
                                  v-model="search.signTimeEnd"
                                  value-format="yyyy-MM-dd"
                  ></el-date-picker>
                </el-form-item>
              </el-col>
              <el-col :lg="4" :md="6">
                <el-form-item prop="outNo">
                  <el-input v-model="search.outNo" placeholder="来源单号"></el-input>
                </el-form-item>
              </el-col>
              <el-col :lg="4" :md="6">
                <el-form-item prop="boolStorage">
                  <el-select v-model="search.boolStorage" clearable filterable placeholder="是否仓储">
                    <el-option label="是" value="1"></el-option>
                    <el-option label="否" value="0"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </div>
          </el-row>
        </el-form>
      </el-card>
    </el-col>
    <el-col :span="24">
      <BasicTable
        ref="BasicTable"
        url="/ms-terminal-order/query-order/get-service-order-export"
        :columns="columns"
      >
        <template slot="preColumn">
          <el-table-column prop="orderNo" fixed="left" width="170px" align="center" label="服务订单号">
            <template slot-scope="scope">
              <a href="javascript: void (0);" @click.prevent="show(scope.row)">
                {{ scope.row.orderNo }}
              </a>
            </template>
          </el-table-column>
        </template>
      </BasicTable>
    </el-col>
  </el-row>
</template>
<script>
import {copy, dotData} from '@/utils'
import {filterSecond, filterDataBaseDictionary, unixTimestampFilter} from '@/filters'
import {getCargoSourceType, getServiceType, getOrderState} from '@/utils/selectOptions'

export default {
  name: 'warehouseExceptionIndex',
  components: {},
  filters: {
    filterSecond,
    filterDataBaseDictionary
  },
  data() {
    let columns = [
      {
        label: '订单来源',
        data: 'outSourceWarehouse'
      },
      {
        label: '来源单号',
        data: 'outNo'
      },
      {
        label: '是否仓储',
        data: 'boolStorage',
        render: (data, type, full, meta) => {
          return data === 1 ? '是' : '否'
        }
      },
      {
        label: '仓储类型',
        data: 'storageTypeCode',
        render(data, type, full, meta) {
          return filterDataBaseDictionary(data)
        }
      },
      {
        label: '货主名称',
        data: 'cargoOwner'
      },
      {
        label: '服务单号',
        data: 'serviceOrderNo'
      },
      {
        label: '服务类型',
        data: 'serviceTypeCode',
        render(data, type, full, meta) {
          return filterDataBaseDictionary(data)
        }
      },
      {
        label: '费用名称',
        data: 'costName'
      },
      {
        label: '费用金额',
        data: 'money'
      },
      {
        label: '订单费用合计',
        data: 'orderMoney'
      },
      {
        label: '产品数量',
        data: 'productNum'
      },
      {
        label: '总包件',
        data: 'totalPackage'
      },
      {
        label: '总体积(m³)',
        data: 'totalVolume'
      },
      {
        label: '到件状态',
        data: 'arriveState',
        render(data, type, full, meta) {
          let num = parseInt(data)
          switch (num) {
            case 0 :
              return '未到件'
            case 1 :
              return '部分到件'
            case 2 :
              return '全部到件'
            default :
              return ''
          }
        }
      },
      {
        label: '订单状态',
        data: 'orderState',
        render(data, type, full, meta) {
          return filterDataBaseDictionary(data)
        }
      },
      {
        label: '用户姓名',
        data: 'consigneName'
      },
      {
        label: '用户电话',
        data: 'consignePhone'
      },
      {
        label: '用户地址',
        data: null,
        render(data, type, full, meta) {
          return `${full.row.consigneProvince} ${full.row.consigneCity} ${full.row.consigneDistrict} ${full.row.consigneAddress}`
        }
      },
      {
        label: '提货联系人',
        data: 'pickUpName'
      },
      {
        label: '提货电话',
        data: 'pickUpPhone'
      },
      {
        label: '提货地址',
        data: null,
        render(data, type, full, meta) {
          return `${full.row.pickUpProvince} ${full.row.pickUpCity} ${full.row.pickUpDistrict} ${full.row.pickUpAdress}`
        }
      },
      {
        label: '下单人',
        data: 'founderUserName'
      },
      {
        label: '下单时间',
        data: 'foundDate',
        render(data, type, full, meta) {
          return unixTimestampFilter(data, 'YYYY-MM-DD HH:mm')
        }
      },
      {
        label: '全部入库时间',
        data: 'putInTime',
        render(data, type, full, meta) {
          return unixTimestampFilter(data, 'YYYY-MM-DD HH:mm')
        }
      },
      {
        label: '出库时间',
        data: 'outTime',
        render(data, type, full, meta) {
          return unixTimestampFilter(data, 'YYYY-MM-DD HH:mm')
        }
      },
      {
        label: '预约时间',
        data: 'appointmentTime',
        render(data, type, full, meta) {
          return unixTimestampFilter(data, 'YYYY-MM-DD HH:mm')
        }
      },
      {
        label: '出发时间',
        data: 'outBoundTime',
        render(data, type, full, meta) {
          return unixTimestampFilter(data, 'YYYY-MM-DD HH:mm')
        }
      },
      {
        label: '上门时间',
        data: 'houseCallTime',
        render(data, type, full, meta) {
          return unixTimestampFilter(data, 'YYYY-MM-DD HH:mm')
        }
      },
      {
        label: '签收时间',
        data: 'signTime',
        render(data, type, full, meta) {
          return unixTimestampFilter(data, 'YYYY-MM-DD HH:mm')
        }
      }
    ]
    return {
      cargoSourceTypes: [],
      serviceArr: [],
      searchLoading: false,
      search: {
        orderNo: '',
        storageTypeCode: '',
        cargoOwner: '',
        serviceTypeCode: '',
        consigneName: '',
        consignePhone: '',
        orderState: '',
        arriveState: '',
        foundDateStart: '',
        foundDateEnd: '',
        putInTimeStart: '',
        putInTimeEnd: '',
        outTimeStart: '',
        outTimeEnd: '',
        outBoundTimeStart: '',
        outBoundTimeEnd: '',
        houseCallTimeStart: '',
        houseCallTimeEnd: '',
        signTimeStart: '',
        signTimeEnd: '',
        addressArr: [],
        outSourceWarehouse: '',
        outNo: '',
        boolStorage: ''
      },
      orderStateArr: [],
      params: {
        pageSize: 20,
        pageNum: 1
      },
      searchOpen: false,
      columns
    }
  },
  created() {
    // 商家来源
    getCargoSourceType().then(arr => {
      this.cargoSourceTypes = arr
    })
    // 服务类型
    getServiceType().then(arr => {
      this.serviceArr = arr
    })
    // 订单状态
    getOrderState().then(arr => {
      this.orderStateArr = arr
    })
  },
  methods: {
    show(data) {
      this.$router.push({path: '/ss-oms/orders/service-orders/show/' + data.orderId})
    },
    searchFunc(search) {
      this.searchLoading = true
      let data = copy(search, true)
      // 处理地址
      data.consigneProvinceNo = dotData(data.addressArr, '[0]') || ''
      data.consigneCityNo = dotData(data.addressArr, '[1]') || ''
      data.consigneDistrictNo = dotData(data.addressArr, '[2]') || ''
      delete data.addressArr
      this.$refs.BasicTable.search(data).finally(_ => {
        this.searchLoading = false
      })
    },
    // reset 重置搜索框
    reset(searchForm) {
      this.$refs.searchForm.resetFields()
    }
  }
}
</script>
